<template>
  <!--  -->
  <teleport to="body">
    <div class="pop">
      <el-dialog
        v-model="show"
        align-center
        :title="title"
        center
        :width="width"
        :close-on-click-modal="false"
        destroy-on-close
      >
        <slot></slot>
        <template #footer>
          <div class="dialog-footer">
            <el-button @click="close">取消</el-button>
            <el-button type="primary" @click="sure">确定</el-button>
          </div>
        </template>
      </el-dialog>
    </div>
  </teleport>
</template>

<script setup>
import { onMounted, computed } from "vue";
import useUtils from "@/utils";
const { $common, $router, $store, $global } = useUtils();

const props = defineProps({
  width: {
    default: "50%",
  },
  title: {
    default: "",
  },
  modelValue: {
    default: false,
  },
});

let num = $ref(1);
setTimeout(() => {
  num++;
}, 1000);

const emits = defineEmits(["update:modelValue", "sure"]);

const show = computed({
  get: () => {
    return props.modelValue;
  },
  set: (value) => {
    emits("update:modelValue", value);
  },
});

function sure() {
  emits("sure");
}
function close() {
  show.value = false;
}
</script>
<style lang="scss" scoped>
.pop {
  &::v-deep(.el-dialog) {
    border-radius: 6px;
  }
}
</style>
